<template>
   <div class="account-setting-base">
      <div class="setting-content">
         <div class="layout-item right">
            <div class="setting-info-title">
               <span>基本设置</span>
            </div>
            <div class="setting-info">
               <div class="setting-info-content">
                  <el-row :gutter="15">
                     <el-form
                        ref="elForm"
                        :model="formData"
                        :rules="rules"
                        size="medium"
                        label-width="100px"
                        label-position="top"
                     >
                        <el-col :span="24">
                           <el-form-item label="机构ID" prop="field101">
                              <el-input
                                 v-model="formData.field101"
                                 placeholder="请输入单行文本机构ID"
                                 clearable
                                 :style="{width: '100%'}"
                              ></el-input>
                           </el-form-item>
                        </el-col>
                        <el-col :span="24">
                           <el-form-item label="机构名称" prop="field104">
                              <el-input
                                 v-model="formData.field104"
                                 placeholder="请输入机构名称"
                                 clearable
                                 :style="{width: '100%'}"
                              ></el-input>
                           </el-form-item>
                        </el-col>
                        <el-col :span="24">
                           <el-form-item label="组织创建者" prop="field103">
                              <el-input
                                 v-model="formData.field103"
                                 placeholder="请输入组织创建者"
                                 clearable
                                 :style="{width: '100%'}"
                              ></el-input>
                           </el-form-item>
                        </el-col>
                        <el-col :span="24">
                           <el-form-item label="组织code" prop="field105">
                              <el-input
                                 v-model="formData.field105"
                                 placeholder="请输入组织code"
                                 clearable
                                 :style="{width: '100%'}"
                              ></el-input>
                           </el-form-item>
                        </el-col>
                        <el-col :span="24">
                           <el-form-item label="组织类型" prop="field106">
                              <el-input
                                 v-model="formData.field106"
                                 placeholder="请输入组织类型"
                                 clearable
                                 :style="{width: '100%'}"
                              ></el-input>
                           </el-form-item>
                        </el-col>
                        <el-col :span="24">
                           <el-form-item label="组织状态" prop="field107">
                              <el-input
                                 v-model="formData.field107"
                                 placeholder="请输入组织状态"
                                 clearable
                                 :style="{width: '100%'}"
                              ></el-input>
                           </el-form-item>
                        </el-col>
                        <el-col :span="24">
                           <el-form-item label="省" prop="field116">
                              <el-select
                                 v-model="formData.field116"
                                 placeholder="请选择省"
                                 clearable
                                 :style="{width: '100%'}"
                              >
                                 <el-option
                                    v-for="(item, index) in field116Options"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled"
                                 ></el-option>
                              </el-select>
                           </el-form-item>
                        </el-col>
                        <el-col :span="24">
                           <el-form-item label="市" prop="field114">
                              <el-select
                                 v-model="formData.field114"
                                 placeholder="请选择市"
                                 clearable
                                 :style="{width: '100%'}"
                              >
                                 <el-option
                                    v-for="(item, index) in field114Options"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled"
                                 ></el-option>
                              </el-select>
                           </el-form-item>
                        </el-col>
                        <el-col :span="24">
                           <el-form-item label="区" prop="field115">
                              <el-select
                                 v-model="formData.field115"
                                 placeholder="请选择区"
                                 clearable
                                 :style="{width: '100%'}"
                              >
                                 <el-option
                                    v-for="(item, index) in field115Options"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled"
                                 ></el-option>
                              </el-select>
                           </el-form-item>
                        </el-col>
                        <el-col :span="24">
                           <el-form-item label="具体地址" prop="field110">
                              <el-input
                                 v-model="formData.field110"
                                 placeholder="请输入具体地址"
                                 clearable
                                 :style="{width: '100%'}"
                              ></el-input>
                           </el-form-item>
                        </el-col>
                        <el-col :span="24">
                           <el-form-item size="large" style="text-align:center">
                              <el-button type="primary" @click="submitForm">提交</el-button>
                              <el-button @click="resetForm">重置</el-button>
                           </el-form-item>
                        </el-col>
                     </el-form>
                  </el-row>
               </div>
               <div class="setting-info-avatar">
                  <span>头像</span>
                  <a-avatar class="avatar" :size="150" :src="userInfo.src">{{userInfo.name}}</a-avatar>
                  <a-upload
                     name="avatar"
                     class="avatar-uploader"
                     :multiple="true"
                     action="#"
                     :beforeUpload="beforeUpload"
                     @change="handleChange"
                  >
                     <el-button icon="el-icon-upload" class="upload">更换头像</el-button>
                  </a-upload>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>

<script>
export default {
   data() {
      return {
         userInfo: {
            name: "小王",
            src:
               "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587027940455&di=8b3f9f4c9779472321ed926453f9ead8&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F10%2F20170410095843_SEvMy.thumb.700_0.jpeg"
         },
         formData: {
            field101: undefined,
            field104: undefined,
            field103: undefined,
            field105: undefined,
            field106: undefined,
            field107: undefined,
            field116: undefined,
            field114: undefined,
            field115: undefined,
            field110: undefined
         },
         rules: {
            field101: [
               {
                  required: true,
                  message: "请输入单行文本机构ID",
                  trigger: "blur"
               }
            ],
            field104: [
               {
                  required: true,
                  message: "请输入机构名称",
                  trigger: "blur"
               }
            ],
            field103: [
               {
                  required: true,
                  message: "请输入组织创建者",
                  trigger: "blur"
               }
            ],
            field105: [
               {
                  required: true,
                  message: "请输入组织code",
                  trigger: "blur"
               }
            ],
            field106: [
               {
                  required: true,
                  message: "请输入组织类型",
                  trigger: "blur"
               }
            ],
            field107: [
               {
                  required: true,
                  message: "请输入组织状态",
                  trigger: "blur"
               }
            ],
            field116: [
               {
                  required: true,
                  message: "请选择省",
                  trigger: "change"
               }
            ],
            field114: [
               {
                  required: true,
                  message: "请选择市",
                  trigger: "change"
               }
            ],
            field115: [
               {
                  required: true,
                  message: "请选择区",
                  trigger: "change"
               }
            ],
            field110: [
               {
                  required: true,
                  message: "请输入具体地址",
                  trigger: "blur"
               }
            ]
         },
         field116Options: [
            {
               label: "选项一",
               value: 1
            },
            {
               label: "选项二",
               value: 2
            }
         ],
         field114Options: [
            {
               label: "选项一",
               value: 1
            },
            {
               label: "选项二",
               value: 2
            }
         ],
         field115Options: [
            {
               label: "选项一",
               value: 1
            },
            {
               label: "选项二",
               value: 2
            }
         ]
      };
   },
   created() {},
   destroyed() {},
   mounted() {},
   methods: {
      submitForm() {
         this.$refs["elForm"].validate(valid => {
            if (!valid) return;
            // TODO 提交表单
         });
      },
      resetForm() {
         this.$refs["elForm"].resetFields();
      },
      handleChange(info) {
         if (info.file.status === "uploading") {
            notice(`正在上传，请稍后...`, "message", "loading", 0);
            this.uploadLoading = true;
            return;
         }
         if (info.file.status === "done") {
            getBase64(info.file.originFileObj, imageUrl => {
               this.userInfo.avatar = info.file.response.data.url;
               this.$store.dispatch("SET_USER", this.userInfo);
               this.uploadLoading = false;
               setTimeout(function() {
                  destroyNotice();
               }, 500);
               // this.$store.dispatch('SET_USER', this.userInfo);
            });
         }
      },
      beforeUpload(file) {
         const isLt2M = file.size / 1024 / 1024 < 2;
         if (!isLt2M) {
            this.$message.error("图片不能超过2MB!");
         }
         return isLt2M;
      }
   }
};
</script>
<style scoped lang="less">
.account-setting-base {
   .wrapper-main {
      padding-left: 0;
   }

   .setting-content {
      display: flex;
      flex-direction: row;

      .right {
         flex: 1 1 0;
         padding: 8px 40px;

         .setting-info-title {
            font-size: 20px;
         }

         .setting-info {
            display: flex;
            flex-direction: row;
            padding-top: 12px;

            &-content {
               width: 320px;
            }

            &-avatar {
               padding-left: 104px;
               display: flex;
               flex-direction: column;

               .avatar {
                  margin-top: 12px;
               }

               .avatar-uploader {
                  width: 115px;
                  margin: 24px auto;
               }
            }
         }
      }
   }
}
</style>
